//一个三角形和一个正方形
import * as THREE from "../node_modules/three/build/three.module.js";

//场景,相机,渲染器初始化
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  100
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//相机设置位置,并向场景添加相机
camera.position.set(0, 0, 5);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

//定义材质,纯颜色
var material = new THREE.MeshBasicMaterial({
  color: 0x2ecc71,
});
//定义几何体
var planeGeo = new THREE.PlaneGeometry(1, 1); //平面集合体
//创建网格,集合体和材质只有结合到网格上才能添加到场景里
var plane = new THREE.Mesh(planeGeo, material);
plane.position.x = 1;
scene.add(plane);

var triGeo = new THREE.Geometry();
triGeo.vertices = [
  new THREE.Vector3(0, -0.8, 0),
  new THREE.Vector3(-2, -0.8, 0),
  new THREE.Vector3(-1, 0.8, 0),
];
//三个顶底的索引,但是为什么是这个顺序
triGeo.faces.push(new THREE.Face3(0, 2, 1));
var triangle = new THREE.Mesh(triGeo, material);
scene.add(triangle);

//使用渲染器渲染场景和相机
renderer.render(scene, camera);
